<template>
  <div class="home">
    <router-view></router-view>
    <div class="tab-bar">
      <router-link tag="section" 
      v-for="(tab, index) in tab_list" 
      :key="index" class="tab-item" :to='tab.uri'>
        <div class="icon">
          <i class="fa" :class="tab.class_name"></i>
        </div>
        <div class="item-name">{{tab.name}}</div>
      </router-link>
    </div>
  </div>
</template>
color:#29cc6d;
<script>
export default {
  data () {
    return {
      tab_list: [
        { uri: '/', class_name: 'fa-futbol-o', name: '上映' },
        { uri: '/cinema', class_name: 'fa-film', name: '影院' },
        { uri: '/shop', class_name: 'fa-shopping-cart', name: '商城' },
        { uri: '/mine', class_name: 'fa-user-o', name: '我的' }
      ]
    }
  }
}
</script>

<style>
.tab-bar {
  height: 49px;
  display: flex;
  position: fixed;
  bottom: 0;
  background: #fff;
  left:0 ;
  right:0 ;
} 
.tab-bar .tab-item {
  flex-grow: 2;
  text-align: center;
}
.tab-item .fa {
  font-size: 24px;
}
.item-name {
  margin-top: 3px;
}
.tab-item.router-link-exact-active {
  color:#29cc6d;
}
</style>



